<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="600"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw hatching in a rectangle
    function drawHatching(x, y, w, h) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(x, y, w, h);
        ctx.clip();

        const spacing = 8;
        ctx.lineWidth = 1;
        ctx.beginPath();
        for (let i = -h; i < w; i += spacing) {
            ctx.moveTo(x + i, y);
            ctx.lineTo(x + i + h, y + h);
        }
        ctx.stroke();
        ctx.restore();
    }

    // --- Main Drawing Logic ---

    // Define dimensions
    const wallThick = 15;
    const centerX = canvas.width / 2;

    // Upper part dimensions
    const upperContainerW = 300;
    const upperContainerH = 180;
    const upperContainerX = centerX - upperContainerW / 2;
    const upperContainerY = 80;

    // Lower part dimensions
    const lowerContainerW = 150;
    const lowerContainerH = 220;
    const lowerContainerX = centerX - lowerContainerW / 2;

    // Fixed Divider and Pipe dimensions
    const dividerY = upperContainerY + upperContainerH;
    const pipeW = 50;
    const pipeH = 30;
    const pipeX = centerX - pipeW / 2;
    const lowerContainerY = dividerY + pipeH + wallThick;

    // Piston positions
    const pistonAY = upperContainerY + 70;
    const pistonBY = lowerContainerY + 120;


    // Draw container walls (piece by piece)
    ctx.lineWidth = 2;

    // Top wall
    drawHatching(upperContainerX - wallThick, upperContainerY - wallThick, upperContainerW + 2 * wallThick, wallThick);
    ctx.strokeRect(upperContainerX - wallThick, upperContainerY - wallThick, upperContainerW + 2 * wallThick, wallThick);

    // Left wall (upper)
    drawHatching(upperContainerX - wallThick, upperContainerY, wallThick, upperContainerH);
    ctx.strokeRect(upperContainerX - wallThick, upperContainerY, wallThick, upperContainerH);

    // Right wall (upper)
    drawHatching(upperContainerX + upperContainerW, upperContainerY, wallThick, upperContainerH);
    ctx.strokeRect(upperContainerX + upperContainerW, upperContainerY, wallThick, upperContainerH);

    // Fixed dividing wall (with pipe hole)
    // Left part of divider
    drawHatching(upperContainerX, dividerY, pipeX - upperContainerX, wallThick);
    ctx.strokeRect(upperContainerX, dividerY, pipeX - upperContainerX, wallThick);
    // Right part of divider
    drawHatching(pipeX + pipeW, dividerY, (upperContainerX + upperContainerW) - (pipeX + pipeW), wallThick);
    ctx.strokeRect(pipeX + pipeW, dividerY, (upperContainerX + upperContainerW) - (pipeX + pipeW), wallThick);

    // Pipe walls
    // Left pipe wall
    drawHatching(pipeX - wallThick, dividerY, wallThick, pipeH + wallThick);
    ctx.strokeRect(pipeX - wallThick, dividerY, wallThick, pipeH + wallThick);
    // Right pipe wall
    drawHatching(pipeX + pipeW, dividerY, wallThick, pipeH + wallThick);
    ctx.strokeRect(pipeX + pipeW, dividerY, wallThick, pipeH + wallThick);

    // Left wall (lower)
    drawHatching(lowerContainerX - wallThick, lowerContainerY - pipeH - wallThick, wallThick, lowerContainerH + pipeH + wallThick);
    ctx.strokeRect(lowerContainerX - wallThick, lowerContainerY - pipeH - wallThick, wallThick, lowerContainerH + pipeH + wallThick);
    ctx.beginPath();
    ctx.moveTo(lowerContainerX - wallThick, lowerContainerY + lowerContainerH);
    ctx.lineTo(lowerContainerX, lowerContainerY + lowerContainerH);
    ctx.stroke();

    // Right wall (lower)
    drawHatching(lowerContainerX + lowerContainerW, lowerContainerY - pipeH - wallThick, wallThick, lowerContainerH + pipeH + wallThick);
    ctx.strokeRect(lowerContainerX + lowerContainerW, lowerContainerY - pipeH - wallThick, wallThick, lowerContainerH + pipeH + wallThick);
    ctx.beginPath();
    ctx.moveTo(lowerContainerX + lowerContainerW, lowerContainerY + lowerContainerH);
    ctx.lineTo(lowerContainerX + lowerContainerW + wallThick, lowerContainerY + lowerContainerH);
    ctx.stroke();

    // Piston A (The dividing line in the upper chamber)
    ctx.beginPath();
    ctx.moveTo(upperContainerX, pistonAY);
    ctx.lineTo(upperContainerX + upperContainerW, pistonAY);
    ctx.stroke();

    // Piston B (The dividing line in the lower chamber)
    ctx.beginPath();
    ctx.moveTo(lowerContainerX, pistonBY);
    ctx.lineTo(lowerContainerX + lowerContainerW, pistonBY);
    ctx.stroke();

    // Heater L
    const coilY = upperContainerY + 15;
    const coilWidth = 80;
    const numCoils = 4;
    const coilStartX = centerX - coilWidth / 2;
    const coilSegmentWidth = coilWidth / numCoils;
    const coilRadius = coilSegmentWidth / 2;

    ctx.lineWidth = 1.5;
    // Leads
    ctx.beginPath();
    ctx.moveTo(coilStartX, upperContainerY - wallThick);
    ctx.lineTo(coilStartX, coilY);
    ctx.moveTo(coilStartX + coilWidth, upperContainerY - wallThick);
    ctx.lineTo(coilStartX + coilWidth, coilY);
    ctx.stroke();

    // Coil
    ctx.beginPath();
    ctx.moveTo(coilStartX, coilY);
    for (let i = 0; i < numCoils; i++) {
        const arcCenterX = coilStartX + coilSegmentWidth * (i + 0.5);
        ctx.arc(arcCenterX, coilY, coilRadius, Math.PI, 2 * Math.PI, false);
    }
    ctx.stroke();

    // Labels
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1;
    ctx.font = "24px Arial";
    // L
    ctx.fillText('L', centerX, upperContainerY - wallThick - 20);
    // A
    ctx.fillText('A', centerX, pistonAY + 50);
    // B
    ctx.fillText('B', centerX, lowerContainerY + 40);

    // Chinese characters
    ctx.font = "24px 'KaiTi', 'SimSun', sans-serif";
    // 大气
    ctx.fillText('大气', centerX, pistonBY + 40);
    // 热图 2.8.1
    ctx.font = "22px 'KaiTi', 'SimSun', sans-serif";
    ctx.fillText('热图 2.8.1', centerX, canvas.height - 30);

</script>
</body>
</html>